<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>🌟 花哨升级界面 🌟</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: 'Segoe UI', sans-serif;
            background-color: #000;
            color: white;
        }

        #tsparticles {
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: -2;
        }

        canvas#fireworks {
            position: fixed;
            top: 0;
            left: 0;
            z-index: -1;
        }

        header {
            text-align: center;
            padding: 60px 20px 20px;
        }

        h1 {
            font-size: 3rem;
            text-shadow: 0 0 10px #fff, 0 0 30px #0ff, 0 0 50px #f0f;
        }

        .neon-button {
            padding: 15px 30px;
            background: transparent;
            border: 2px solid #fff;
            border-radius: 30px;
            color: white;
            font-size: 1.2rem;
            box-shadow: 0 0 20px #0ff, 0 0 40px #f0f;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .neon-button:hover {
            background: #fff;
            color: #000;
        }

        .container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 30px;
            padding: 40px 20px;
        }

        .card {
            perspective: 1000px;
        }

        .card-inner {
            width: 260px;
            height: 180px;
            border-radius: 15px;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s;
            cursor: pointer;
        }

        .card:hover .card-inner {
            transform: rotateY(180deg);
        }

        .card-front,
        .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
            border-radius: 15px;
            backface-visibility: hidden;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 2px solid #fff;
            box-shadow: 0 0 10px #ff00cc, 0 0 30px #00ccff;
        }

        .card-back {
            transform: rotateY(180deg);
        }

        footer {
            text-align: center;
            padding: 40px 20px;
            font-size: 0.9rem;
            color: #ccc;
        }

        audio {
            display: none;
        }
    </style>
</head>

<body>
    <div id="tsparticles"></div>
    <canvas id="fireworks"></canvas>

    <header>
        <h1>🌈 欢迎来到花哨世界！🌈</h1>
        <button class="neon-button" onclick="document.getElementById('bgm').play()">点击开启背景音乐 🎵</button>
    </header>

    <div class="container">
        <div class="card">
            <div class="card-inner">
                <div class="card-front">
                    <h2>✨ 卡片一</h2>
                    <p>点击或悬浮卡片，看看背面有什么！</p>
                </div>
                <div class="card-back">
                    <h2>🎉 哇哦！</h2>
                    <p>这是卡片的背面内容哦！</p>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-inner">
                <div class="card-front">
                    <h2>🚀 卡片二</h2>
                    <p>配合粒子背景和霓虹风格，界面动感十足。</p>
                </div>
                <div class="card-back">
                    <h2>🌌 背面</h2>
                    <p>更多内容可以加动画展示哦！</p>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-inner">
                <div class="card-front">
                    <h2>💡 卡片三</h2>
                    <p>点击页面任意地方试试？有惊喜！</p>
                </div>
                <div class="card-back">
                    <h2>🎆 烟花！</h2>
                    <p>是的，点击页面会触发烟花特效！</p>
                </div>
            </div>
        </div>
    </div>

    <footer>
        &copy; 2025 王涛哥哥的花哨界面实验室 | 文杰 ❤️ 涛 ✨
    </footer>

    <audio id="bgm"
        src="https://cdn.pixabay.com/download/audio/2023/04/12/audio_3f9567887b.mp3?filename=lofi-chill-medium-version-145296.mp3"
        loop autoplay></audio>

    <!-- tsParticles 粒子背景引擎 -->
    <script src="https://cdn.jsdelivr.net/npm/tsparticles@3/tsparticles.bundle.min.js"></script>
    <script>
        tsParticles.load("tsparticles", {
            fullScreen: { enable: true },
            background: { color: "#000000" },
            particles: {
                number: { value: 80 },
                color: { value: "#ffffff" },
                shape: { type: "circle" },
                opacity: { value: 0.5 },
                size: { value: { min: 1, max: 5 } },
                move: {
                    enable: true,
                    speed: 1,
                    direction: "none",
                    outModes: "bounce"
                },
                links: {
                    enable: true,
                    distance: 150,
                    color: "#ffffff",
                    opacity: 0.4,
                    width: 1
                }
            },
            interactivity: {
                events: {
                    onHover: { enable: true, mode: "repulse" },
                    onClick: { enable: true, mode: "push" }
                },
                modes: {
                    repulse: { distance: 100 },
                    push: { quantity: 4 }
                }
            }
        });
    </script>

    <!-- 简单烟花爆炸 Canvas 动画 -->
    <script>
        const canvas = document.getElementById("fireworks");
        const ctx = canvas.getContext("2d");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        let fireworks = [];

        function Firework(x, y) {
            this.particles = [];
            for (let i = 0; i < 100; i++) {
                this.particles.push({
                    x: x,
                    y: y,
                    angle: Math.random() * 2 * Math.PI,
                    speed: Math.random() * 4 + 1,
                    radius: Math.random() * 2 + 1,
                    alpha: 1
                });
            }
        }

        Firework.prototype.update = function () {
            this.particles.forEach(p => {
                p.x += Math.cos(p.angle) * p.speed;
                p.y += Math.sin(p.angle) * p.speed;
                p.alpha -= 0.01;
            });
            this.particles = this.particles.filter(p => p.alpha > 0);
        };

        Firework.prototype.draw = function () {
            this.particles.forEach(p => {
                ctx.beginPath();
                ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI);
                ctx.fillStyle = `rgba(255,255,255,${p.alpha})`;
                ctx.fill();
            });
        };

        function animate() {
            ctx.fillStyle = "rgba(0,0,0,0.1)";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            fireworks.forEach(f => {
                f.update();
                f.draw();
            });
            fireworks = fireworks.filter(f => f.particles.length > 0);
            requestAnimationFrame(animate);
        }

        animate();

        window.addEventListener("click", e => {
            fireworks.push(new Firework(e.clientX, e.clientY));
        });

        window.addEventListener("resize", () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });
    </script>
</body>

</html>